<template>
  <div class="basic-information-wrapper">
    <div class="title">
      <span class="fz-18 fw-7">{{ title }}</span>
      <!-- <span v-if="registerId" class="register-tag fz-14 px-8 py-4 linh-24 br-4 ml-8" style="white-space: nowrap">
        您已报名
      </span> -->
    </div>
    <div class="basic-information">
      <div class="disFlxAC">
        <div class="price-span" v-if="startPrice">
          <span class="fz-12">{{ DEFAULT_SYMBOL }}</span>
          <span class="fz-18" v-if="startPrice">
            {{
              formatMoney({
                money: !isNullOrUnDef(startPrice) ? startPrice : originalPrice,
                isShowFree: false,
                symbol: ''
              })
            }}
          </span>
          <span class="fz-12 ml-2">起</span>
        </div>
        <!-- <div v-if="tagName" class="fz-14 h-24 px-8 linh-24 ml-8 discount-label">
          <span>{{ tagName }}</span>
        </div> -->
      </div>
      <!-- <div v-if="!isNullOrUnDef(startPrice)" class="original-price disFlxAC fz-14">
        <span>原价：</span>
        <span>{{ formatMoney({ money: originalPrice }) }}</span>
      </div> -->
      <div class="activity-time">
        <a-icon type="clock-circle" theme="filled" class="icon-style" />
        <span class="time-str">
          活动时间：{{ formatToDateTime(startTime, 'YYYY年MM月DD日 HH:mm') }} ~
          {{ formatToDateTime(endTime, 'MM月DD日 HH:mm') }}
        </span>
      </div>

      <div v-if="address || addressName" class="location" :style="{ backgroundImage: `url(${LocationBg})` }">
        <div class="addr-info">
          <span class="addressName ov-1">{{ address }}</span>
          <span class="address">{{ addressName }}</span>
        </div>
        <div class="location-btn-box">
          <span class="ali-icon icon-weizhi icon-style"></span>
          <span class="span">导航</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatToDateTime } from '@/utils/dateUtil'
import { formatMoney, DEFAULT_SYMBOL } from '@/utils/number'
import LocationBg from '@/assets/location-bg.jpg'
import { isNullOrUnDef } from '@/utils/is'

export default {
  components: {
    // 如果 a-card 是自定义组件，确保在这里注册
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    registerId: {
      type: String,
      default: ''
    },
    remainingSeats: {
      type: Number,
      default: 0
    },
    registrationsNumber: {
      type: Number,
      default: 0
    },
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    },
    addressName: {
      type: String,
      default: ''
    },
    address: {
      type: String,
      default: ''
    },
    longitude: {
      type: [String, Number],
      default: ''
    },
    latitude: {
      type: [String, Number],
      default: ''
    },
    startPrice: {
      type: Number,
      default: 0
    },
    originalPrice: {
      type: Number,
      default: 0
    },
    tagName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      LocationBg,
      DEFAULT_SYMBOL
    }
  },
  methods: {
    formatToDateTime,
    formatMoney,
    isNullOrUnDef
  }
}
</script>
<style lang="less" scoped>
@priceColor: #ea5e0e;
@desColor: #969799;

.basic-information-wrapper {
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  /* 默认卡片投影 */
  box-shadow: 0px 2px 12px 0px rgba(150, 151, 153, 0.16);

  .fz-14 {
    font-size: 14px;
  }

  .h-24 {
    height: 12px;
  }

  .linh-24 {
    line-height: 12px;
  }

  .px-8 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .py-4 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .br-4 {
    border-radius: 4px;
  }

  .ml-8 {
    margin-left: 8px;
  }

  .fz-18 {
    font-size: 18px;
  }

  .fz-12 {
    font-size: 12px;
  }

  .fw-7 {
    font-weight: bold;
  }

  .ml-2 {
    margin-left: 1px;
  }

  .title {
    margin-bottom: 8px;
    color: #333;

    .register-tag {
      background-color: #e29942;
      color: #fff;
    }
  }

  .basic-information {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .discount-label {
      border-radius: 2px;
      background-image: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
      color: @priceColor;
    }

    .price-span {
      color: @priceColor;
    }

    .original-price {
      color: @desColor;
    }

    .activity-time {
      display: flex;
      align-items: center;
      gap: 8px;

      .icon-style {
        font-size: 16px;
        color: #ccccc8;
        line-height: 20px;
      }

      .time-str {
        color: #666664;
        font-size: 12px;
        line-height: 16px;
      }
    }

    .location {
      padding: 8px 16px;
      border-radius: 8px;
      background-size: 100% 100%;
      display: flex;
      gap: 8px;
      align-items: center;

      .addr-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 223px;

        .addressName {
          color: #333;
          font-size: 14px;
          line-height: 20px;
        }

        .address {
          color: #999996;
          font-size: 12px;
          line-height: 16px;
        }
      }

      .location-btn-box {
        display: flex;
        padding: 4px 8px;
        border-radius: 12px;
        border: 1px solid #fff;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(1px);
        justify-content: center;
        align-items: center;
        gap: 4px;

        .icon-style {
          font-size: 12px;
          color: #666664;
        }

        .span {
          color: #666664;
          font-size: 12px;
          line-height: 16px;
        }
      }
    }
  }
}
</style>
